import React, { Fragment } from 'react'
import { Input, Button, List } from 'antd'

const TodoListUI = props => {
  const { reduxData, inputChange, buttonClick, deleteClick } = props

  return (
    <Fragment>
      <div>
        { /* jsx写注释的方法 */ }
        <label className="label" htmlFor="input">输入内容</label>
        <Input 
          id="input"
          className="input"
          value={reduxData.inputValue}
          onChange={inputChange} />
        <Button onClick={buttonClick}>按钮</Button>
      </div>
      <List 
        bordered
        className="List"
        ref={ ul => this.ul = ul }
        dataSource={ reduxData.list }
        renderItem={ (item, index) => (<List.Item onClick={() => { deleteClick(index) }}>{ item }</List.Item>) }/>
      {/* <ul ref={ ul => this.ul = ul }>
        { this.getTodoItem() }
      </ul> */}
    </Fragment>
  )
}

export default TodoListUI
